import VueRouter from 'vue-router'
import Vue from 'vue'
import Find from '../views/Find.vue'
import My from '../views/My.vue'
import Part from '../views/Part.vue'
import NotFound from '@/views/NotFound'
// 3.add
Vue.use(VueRouter)
// 4.创建
const routes = [
  // 一个对象表示一条路由规则, 路由就是路径和组件的映射关系
  // {
  //   // 路径
  //   path: '',
  //   // 组件
  //   component: 组件对象
  // }
  {
    path: '/',
    // 重定向的路径
    redirect: '/find'
  },
  {
    // 路径
    path: '/find',
    // 组件
    component: Find,
    // 名字
    name: 'find'
  },
  {
    // 路径
    path: '/my',
    // 组件
    component: My,
    name: 'my'
  },
  {
    // 路径
    path: '/part',
    // 组件
    component: Part,
    name: 'part'
  },
  {
    // * 通配符, 表示匹配任意路径
    path: '*',
    component: NotFound
  }
]
const router = new VueRouter({
  // 可以配置路由信息
  routes,
  linkActiveClass: 'active',
  linkExactActiveClass: 'e-active',
  // # 就是 hash 模式
  // 没有 # 就是 history 模式, 使用的是 H5 的 history.pushState API (可以做到不刷新页面, 切换路径)
  // 如果要使用 hisotry 模式, 必须要后端程序员的配合
  // 面试题: 请说一下路由的模式, 有什么区别?
  mode: 'history'
})
export default router